<template>
    <div>
        <setHeader :title="headerTitle"></setHeader>
        <div class="pagecontent" style="background-color: #fafafa;">
            <div class="main-suspension"> 
                <div class="suspension-top" style="height: 0.88rem !important;"></div>
                <div class="usercardetail" style="">
                    <div class="mycardlist-top clear">
                        <img src="../common/images/u3095.png" alt="">
                        <div class="people-info">
                            <h4>{{this.CardDetails.CardName}}</h4>
                            <span>{{this.CardDetails.CardPosition}}</span>
                            <span>{{this.CardDetails.CardCompany}}</span>
                        </div>
                        <div class="suspension-info-top-right fr" style="margin-top: -1.7rem;" v-if="btnShow">
                            <a href="javascript:void(0)" @click="usercardUpdate()">
                                <i class="iconfont icon-bianji icon_editor"></i>编辑
                            </a>
                        </div>
                    </div>
                    <div class="mycardlist-bottom clear">
                        <div class="detailed-info fl">
                            <p class="clear">
                                <i class="iconfont icon-dianhua1"></i>
                                <a :href="'tel:' + this.CardDetails.CardPhone" class="fl" v-if="this.CardDetails.CardPhone">{{this.CardDetails.CardPhone}}</a> 
                                <a href="javascript:void(0)" class="fl" v-else>暂未填写</a> 
                            </p>
                            <p class="adress_text">
                                <i class="iconfont icon-dingweiweizhi"></i>
                                <span class="fl" v-if="this.CardDetails.CardCompanyAddress">{{this.CardDetails.CardCompanyAddress}}</span> 
                                <span class="fl" v-else>暂未填写</span> 
                            </p>
                        </div>
                        <div class="scan_code fr" @click="erweimaClick()">
                            <i class="iconfont icon-erweima"></i>
                        </div>
                    </div>
                </div>
                <div class="intop" v-show="isShow" @click="intopClick">
                    <img class="intop_img" :src="this.QRcode" alt="">
                </div>
            </div>
            <div class="main-user-card-index-detail">
                <div class="main_menu">
                    <label for="">他的官网</label>
                    <a href="javascript:void(0)" v-if="this.CardDetails.CardWeb">{{this.CardDetails.CardWeb}}<i class="iconfont icon-xiangyou"></i></a>
                    <a href="javascript:void(0)" v-else>暂无<i class="iconfont icon-xiangyou"></i></a>
                </div>
                <div class="main_menu" style="border-bottom: 1px solid #d8d8d8;">
                    <label for="">他的同事</label>
                    <a href="javascript:void(0)">李四<i class="iconfont icon-xiangyou"></i></a>
                </div>
                <div class="main_menu" style="border-bottom: 1px solid #d8d8d8;">
                    <label for="">他的企业</label>
                    <a href="javascript:void(0)">广州卓天网络科技有限公司<i class="iconfont icon-xiangyou"></i></a>
                </div>
                <div class="main_menu" style="border-bottom: 1px solid #d8d8d8;">
                    <label for="">他的圈子</label>
                    <a href="javascript:void(0)">创建圈子<i class="iconfont icon-xiangyou"></i></a>
                </div>
            </div>
            <div class="user-card-btn" v-if="btnShow">
                <button @click="erweimaClick()">分享</button>
                <button @click="Collection(CardDetails.card_id)">收藏</button>
            </div>
        </div>
        <!-- <footerCard></footerCard> -->
    </div>
</template>

<script>
import setHeader from '../public/setHeader.vue';
// import footerCard from '../components/footer_card';
    export default {
        data() {
            return {
                headerTitle: '我的名片',
                isShow: false,
                btnShow: false,
                access_token: '',
                card_id: '',
                CardDetails:'',
                QRcode:'../common/images/u3103.png',
                path:'',
                Card:{
                    access_token:'',
                },
            }
        },
        created:function(){
            let that = this;
            that.card_id = that.$route.query.card_id;
            this.getcarddetail(that.card_id);
            console.log('card_id', that.card_id)
            this.path = this.$path + '/UserCard/usercardIndex?card_id='+ that.card_id;
            this.QRcode = 'http://qr.liantu.com/api.php?text='+this.path;
        },
        mounted() {
            let that = this;
            that.Card.access_token = window.localStorage.getItem('access_token');
            console.log(that.Card.access_token);
            if(that.access_token !=null) {
                that.btnShow = true;
            }
        },
        methods: {
            //二维码显示隐藏
            erweimaClick() {
                this.isShow = !this.isShow;
                // this.$fetch('http://qr.liantu.com/api.php?text=http://www.baidu.com').then((response)=>{

                //     console.log(response);
                //     // if(response.code == 200){
                //     //     // this.CardList = response.data;
                //     //     this.CardDetails = response.data;
                //     // }

                // })
            },
            //点击隐藏遮罩层
            intopClick() {
                this.isShow = false;
            },
            //点击进入名片资料
            usercardUpdate() {
                this.$router.push({
                    path: '/usercardInfo'
                })
            },
             getcarddetail(card_id){
                this.$fetch(this.$path + '/index.php/api/CardDetails/'+card_id).then((response)=>{
                    console.log(response);
                    if(response.code == 200){
                        // this.CardList = response.data;
                        this.CardDetails = response.data;
                    }

                })
            },
            Collection(card_id){   //收藏
                this.$post(this.$path + '/index.php/api/CollectionCard/'+card_id,this.Card).then((response)=>{
                    alert(response.msg);
                })
            }

        },
        components: {
            setHeader
            // footerCard
        },
    }
</script>

<style>
@import '../common/css/userCenter';

/* 我的名片 */
.usercardetail {
    width: 7.1rem;
    height: 3.4rem;
    margin: 0 auto;
    border-radius: 4px;
    box-shadow: 0 2px 3px -1px #f3ecec;
    background-color: #fff;
    position: absolute;
    left: 50%;
    margin-left: -3.55rem;
}
.usercardetail .mycardlist-top {
    border-bottom: 1px solid #d8d8d8;
    margin: 0 0.36rem;
}
.usercardetail .mycardlist-top img {
    width: 1.5rem;
    height: 1.5rem;
    float: left;
    margin: 0.2rem 0.4rem 0.2rem 0;
    box-sizing: border-box;
}
.mycardlist-top .people-info {
    padding: 0.2rem 0  0.2rem 0;
    box-sizing: border-box;
}
.mycardlist-top .people-info h4 {
    font-size: 0.34rem;
    color: #333;
    text-align: left;
    line-height: 0.5rem;
    margin-bottom: 0.06rem;
}
.mycardlist-top .people-info span {
    font-size: 0.28rem;
    color: #999;
    display: block;
    text-align: left;
    line-height: 0.36rem;
}
.usercardetail .mycardlist-bottom {
    margin: 0.2rem 0.36rem;
}
.usercardetail .mycardlist-bottom .detailed-info {
    width: 4.6rem;
}
.usercardetail .mycardlist-bottom .detailed-info p {
    font-size: 0.28rem;
    color: #e50838;
    text-align: left;
    line-height: 0.56rem;
}
.usercardetail .mycardlist-bottom .detailed-info p:last-child {
    color: #999;
}
.adress_text {
    display: flex;
    width: 5.2rem;
    line-height: 0.36rem;
}
.detailed-info p .iconfont {
    width: 0.24rem;
    font-size: 0.24rem;
    float: left;
    margin-right: 0.14rem;
    color: #999;
}
.detailed-info p a {
    font-size: 0.28rem;
    color: #e50838;
    text-align: left;
    line-height: 0.56rem;
}
.usercardetail .mycardlist-bottom .scan_code {
    margin-top: -0.2rem;
    position: relative;
}
.usercardetail .mycardlist-bottom .scan_code .icon-erweima {
    width: 0.74rem;
    height: 0.74rem;
    font-size: 0.74rem;
    color: #a7a2a2;
}
.usercardetail .mycardlist-bottom .scan_code img {
    position: absolute;
    right: 0;
    background-color: #fff;
}

.main-user-card-index-detail {
    margin-top: 0.4rem;
}

.user-card-btn button {
    width: 3.45rem;
    height: 0.8rem;
    border: 1px solid #e50838;
    border-radius: 4px;
    font-size: 0.28rem;
    color: #e50838;
    text-align: center;
    background-color: #fff;
}
.user-card-btn button:last-child {
    background-color: #e50838;
    color: #fff;
}

/* 二维码遮罩层 */
.intop {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}
.intop img {
    width: 30%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -15%;
    margin-top: -15%;
    z-index: 12;
}

</style>